<template>
  <v-chart
    :theme="theme"
    :initOptions="initOptions"
    :loading="loading"
    :loadingOptions="loadingOptions"
    :options="config"
    v-on="$listeners"
    ref="area"
  />
</template>
<script>
import VChart from '../../Core'

import {
  titleTextStyle,
  lbLegend,
  lbGrid,
  lbXAxis,
  lbYAxis,
  labelStyle,
  dataZoom,
} from '../../itemDefaultConfig'
import { formatNumber } from '../../../utils'

export default {
  name: 'AreaChart',
  components: {
    VChart,
  },
  props: {
    boundaryGap: {
      type: Boolean,
      default: true, // 是否两边留白
    },
    showTitle: {
      type: Boolean,
      default: false,
    },
    loadingOptions: Object, // loading 状态配置项
    loading: {
      type: Boolean,
      default: false,
    },
    dataZoom: {
      type: Boolean,
      default: false, // 是否开启横向滚动
    },
    interval: {
      type: Boolean,
      default: true,
    },
    showLabel: {
      type: Boolean,
      default: false,
    },
    initOptions: Object,
    rotate: {
      type: Number,
      default: 0, // x轴字体旋转
    },
    options: {
      type: Object,
      default: function() {
        return {}
      },
    },
    theme: {
      type: [String, Object],
      default: 'xm',
    },
  },

  data() {
    return {}
  },
  computed: {
    config() {
      const { title, legend, grid, xAxis, yAxis, series, ...otherConfig } = this.options

      const { isArray } = Array

      const option = {
        title: {
          ...titleTextStyle,
          show: this.showTitle, // title.show优先级高于showTitle
          ...title,
        },
        tooltip: {
          trigger: 'axis',
          confine: true,
        },
        legend: {
          top: this.showTitle ? 27 : 'top',
          ...lbLegend,
          ...legend,
        },
        dataZoom: this.dataZoom ? dataZoom : [],
        grid: {
          top: this.showTitle ? 66 : 36,
          ...lbGrid,
          right: '6%',
          ...grid,
        },

        xAxis: isArray(xAxis)
          ? xAxis.map(item => ({
              axisLabel: {
                interval: this.interval ? 'auto' : 0,
                rotate: this.rotate || 0,
              },
              boundaryGap: this.boundaryGap,
              ...lbXAxis,
              ...item,
            }))
          : {
              axisLabel: {
                interval: this.interval ? 'auto' : 0,
                rotate: this.rotate || 0,
              },
              boundaryGap: this.boundaryGap,
              ...lbXAxis,
              ...xAxis,
            },

        yAxis: isArray(yAxis)
          ? yAxis.map(item => ({ ...lbYAxis, ...item }))
          : {
              ...lbYAxis,
              ...yAxis,
            },

        series: series || [],
        ...otherConfig,
      }

      option.series.forEach(item => {
        if (this.showLabel || item.show) {
          item.label = {
            ...labelStyle,
            formatter: function({ value }) {
              // 千分位分隔符
              return `${formatNumber(value)}`
            },
            ...item.label,
          }
        }

        item.areaStyle = {}
      })

      return option
    },
  },
  methods: {
    getEchartsInstance() {
      return this.$refs.area.chart
    },
  },
}
</script>
